<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js混入</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<!--混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将会别混入该组件本身-->
    <div id="databinding"></div>
    <script type="text/javascript">
        var vm=new Vue({
            el:'#databinding',
            data:{

            },
            methods:{

            },
        })


        //定义一个混入对象
        var myMixin={
            created:function(){
                this.startmixin()
            },
            methods: {
                startmixin:function(){
                    document.write("这是一个混入实例");
                }
            }
        };

        var Component = Vue.extend({
            mixins:[myMixin]
        })
        var component = new Component();
    </script>


<!--    当组件和混入对象含有同名选项时，这些选项将会以恰当的方式混合-->
<!--比如，数据对象在内部会进行浅合并，在和组件的数据发生冲突的时候会以组件的数据优先-->
    <div id="databinding2"></div>
    <script type="text/javascript">
        var mixin = {
            created:function (){
                document.write('混入调用'+'<br>')
            }
        }
        new Vue({
            mixins:[mixin],
            created:function(){
                document.write('组件调用'+'<br>')
            }
        })
    </script>


<!--如果methods选项中有相同的函数名，则Vue实例优先级会较高-->
    <div id="databinding3"></div>
    <script type="text/javascript">
        var mixin = {
            methods:{
                helloworld:function(){
                    document.write('HelloWorld方法'+'<br>')
                },
                samemethod:function (){
                    document.write('混入对象实例优先。Minxin:相同方法名'+'<br>')
                }
            }
        }
        var vm = new Vue({
            mixins:[mixin],
            methods:{
                start:function(){
                    document.write('start方法'+'<br>')
                },
                samemethod:function(){
                    document.write('Vue实例优先。Main:相同方法名'+'<br>')
                }
            }
        })
        vm.helloworld();
        vm.start();
        vm.samemethod();
    </script>


<!--全局混入-->
<!--注意使用！！！一旦使用了全局混入对象，将会影响所有之后创建的Vue实例-->
    <div id="databinding4"></div>
    <script type="text/javascript">
        Vue.mixin({
            created:function(){
                var myOption = this.$options.myOption
                if(myOption){
                    document.write(myOption)
                }
            }
        })

        new Vue({
            myOption:'全局混入！！！'
        })
    </script>
</body>
</html>